<template>
	<RouterView />
</template>
<script setup>
	// onMounted(() => {
				/*-------------------------------------------------------------mapbox------------------------------*/
				// var url =
				// 	'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHVja2RvZyIsImEiOiJjbGdrNXZmNWkxY2NqM3BteWltcjYwaGl4In0.Xm_EO9lIxHAiCcpJx6FT1A'
				// var layer = L.tileLayer(url, {
				// 	maxZoom: 22,
				// 	attribution: '© OpenStreetMap'
				// })
				// const map = L.map("mapbox", {
				// 	center: [39.9081726, 116.3979471], //中心坐标格式[纬度，经度]
				// 	zoom: 6, //缩放级别
				// 	maxZoom: 20,
				// 	zoomControl: true, //缩放组件
				// 	attributionControl: true, //去掉右下角logo
				// 	layers: [layer], //图层
				// });

				/*-------------------------------------------------------------高德地图------------------------------*/
				// var layer = L.tileLayer(
				// 	'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
				// 		subdomains: ['1', '2', '3', '4'],
				// 	})
				// const map = L.map("mapbox", {
				// 	center: [39.9081726, 116.3979471], //中心坐标格式[纬度，经度]
				// 	zoom: 6, //缩放级别
				// 	maxZoom: 20,
				// 	zoomControl: true, //缩放组件
				// 	attributionControl: true, //去掉右下角logo
				// 	layers: [layer], //图层
				// });
				/*-------------------------------------------------------------天地图------------------------------*/
				// const map = L.map("mapbox", {
				// 	center: [39.9081726, 116.3979471], //中心点[纬度，经度]
				// 	zoom: 6, //默认缩放等级
				// 	crs: L.CRS.EPSG4326 //采用wgs84坐标系
				// });
				// //开发key
				// const key = "eb254cf5e72992be8b22f9adb1f79093";
				// //xyz方式加载底图
				// const tdt_url_bottom = "https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=";
				// //xyz方式加载底图的标注
				// const tdt_url_label = "https://t0.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=";

				// //设置底图图层（url请求地址，偏移量，贴片尺寸大小，最小缩放等级，最大缩放层级）
				// const layer_bottom = L.tileLayer(tdt_url_bottom + key, {
				// 	zoomOffset: 1,
				// 	tileSize: 256,
				// 	minZoom: 1,
				// 	maxZoom: 18
				// });

				// //设置底图标注
				// const layer_label = L.tileLayer(tdt_url_label + key, {
				// 	zoomOffset: 1,
				// 	tileSize: 256,
				// 	minZoom: 1,
				// 	maxZoom: 18
				// });
				// //将图层丢到地图上
				// layer_bottom.addTo(map);
				// layer_label.addTo(map)


				/* ---------------------------------------地点标记---------------------------------------------*/
				// 	var svgIconUrl =
				// 		''
				// 	var testiconUrl =
				// 		''
				// 	// 创建一个 L.Icon 实例，使用 SVG 图片作为图标
				// 	var myIcon1 = L.icon({
				// 		iconUrl: svgIconUrl,
				// 		iconSize: [60, 60], // 例如，SVG 图标宽度为 38px，高度为 95px
				// 		// 设置图标在标记上的定位点
				// 		iconAnchor: [22, 94], // 例如，定位点在 SVG 图标的中心
				// 		// 可选：设置弹出窗口时图标的定位点
				// 		popupAnchor: [-3, -76]
				// 	});
				// 	var myIcon2 = L.icon({
				// 		iconUrl: testiconUrl,
				// 		iconSize: [60, 60],
				// 		iconAnchor: [22, 94],
				// 		popupAnchor: [-3, -76]
				// 	});
				// 	// 创建标记并应用自定义图标
				// 	const addressInfo = [{
				// 			lng: 116.3979471,
				// 			lat: 39.9081726,
				// 			device: "北京客户.现场1.工程1.设备1",
				// 			tem: 23.3,
				// 			hum: 30.3,
				// 			com: 'off',
				// 			state: 'online'
				// 		},
				// 		{
				// 			lng: 117.0056,
				// 			lat: 36.6670723,
				// 			device: "济南客户.现场1.工程1.设备1",
				// 			tem: 28.5,
				// 			hum: 30.5,
				// 			com: 'on',
				// 			state: 'online'
				// 		},
				// 		{
				// 			lng: 117.2523808,
				// 			lat: 39.1038561,
				// 			device: "天津客户.现场1.工程1.设备1",
				// 			tem: 28.1,
				// 			hum: 26.5,
				// 			com: 'off',
				// 			state: 'offline'
				// 		},
				// 		{
				// 			lng: 108.88750000000005,
				// 			lat: 34.223189,
				// 			device: "西安客户.现场1.工程1.设备1",
				// 			tem: 32.7,
				// 			hum: 18.5,
				// 			com: 'off',
				// 			state: 'online'
				// 		},
				// 		{
				// 			lng: 114.4897766,
				// 			lat: 38.0451279,
				// 			device: "河北客户.现场1.工程1.设备1",
				// 			tem: 36.9,
				// 			hum: 40.15,
				// 			com: 'off',
				// 			state: 'offline'
				// 		},
				// 	]
				// 	// 循环 addressInfo 数组创建标记
				// 	addressInfo.forEach(function(info) {
				// 		let html = `
				// 	    <p style="font-weight: 600;">${info.device}</p>
				// 		<p>
				// 		  <span style='color:#333'>风机:</span>
				// 		  <span style='color:#06c'>${info.com}</span>
				// 		</p>
				// 	    <p>
				// 	      <span style='color:#333'>温度:</span>
				// 	      <span style='color:#06c'>${info.tem}</span> ℃
				// 	    </p>
				// 		<p>
				// 		  <span style='color:#333'>湿度:</span>
				// 		  <span style='color:#06c'>${info.hum}</span> ℃
				// 		</p>
				// 		 <span class="clickable-paragraph" style="border-bottom: 1px solid #06c;color:#06c;cursor: pointer;">查看详情</span>
				// 		`
				// 		// 为每个地点创建一个标记
				// 		var marker = L.marker([info.lat, info.lng], {
				// 			icon: info.state === 'online' ? myIcon1 : myIcon2
				// 		}).bindPopup(html, {
				// 			className: 'my-popup-class'
				// 		}).on('popupopen', function(e) {
				// 			var popup = e.popup;
				// 			// 监听弹窗内的特定段落的点击事件
				// 			popup.getElement().querySelector('.clickable-paragraph').addEventListener('click',
				// 				function() {
				// 					console.log('点击弹框详情', info);
				// 					// 执行你想要进行的操作
				// 				});
				// 		});
				// 		// marker.on('click', function() {
				// 		// 	console.log('点击标记事件~~~', info);
				// 		// 	map.flyTo([info.lat, info.lng], 17, {
				// 		// 		animate: true, // 确保动画效果开启
				// 		// 		duration: 1.0, // 动画持续时间，单位秒
				// 		// 	});
				// 		// }); 
				// 		map.addLayer(marker);
				// 	});
				// });
</script>
<style></style>